| |
|
|
| |
We can dynamically check and un-check radio buttons with javascript. The basic syntax is:
button.checked = true
or
button.checked = false
"checked" is a property of the radio button object. Have a look at this...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox()
{
window.document.myform.fruit[0].checked = true;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'oranges'">Oranges & Tangerines<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'bananas'">Bananas<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'peaches'">Peaches, Nectarines & Plums<BR>
To select Oranges <A HREF="javascript:FruitBox()">click here</A>.
</FORM>
</BODY>
</HTML>
|
See what's going on? The group of buttons is an array... fruit[0], fruit[1] and fruit[2], and can be referenced as such. The function basically says, check the first element in that group, which happens to be Oranges.
Exercise: Slightly alter the script to check bananas when the link is clicked.
Exercise: rather than having the number (0, 1 or 2) hard coded into the function, send it a number from the link. Send it 2 for peaches.
Now we'll add two more links, one for each fruit...
To select Oranges click here.
To select Bananas click here.
To select Peaches click here.
Notice that Oranges, Bananas and Peaches all have 7 letters? And 7 is only one more than 6? And 666 is the sign of the devil? I think this means that these fruits are the fruit of the devil. Or maybe it means that the devil likes fruit? I don't know, it has to be more than just a coincidence, don't you think? ;-)
We'll also add a fourth line that grabs the current value and throws it up in an alert box...
To read the current value click here.
Here is what we have to this point...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox(whichfruit)
{
window.document.myform.fruit[whichfruit].checked = true;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'oranges'">Oranges & Tangerines<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'bananas'">Bananas<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'peaches'">Peaches, Nectarines & Plums<BR>
To select Oranges <A HREF="javascript:FruitBox(0)">click here</A>.<BR>
To select Bananas <A HREF="javascript:FruitBox(1)">click here</A>.<BR>
To select Peaches <A HREF="javascript:FruitBox(2)">click here</A>.<BR>
To read the current value <A HREF="javascript:alert(window.document.myform.fruit.value)">click here</A>.
</FORM>
</BODY>
</HTML>
|
Play with the thing a bit. Do you notice a problem? We can select items easy enough using the links, but when we do, the value (as far as javascript is concerned) still comes back as undefined. Hmm.
| << BACK NEXT >> |
|
|
Javascript Reference irt.org/Javascript FAQ Deja Power Search  Joke Break |
|
| Print version available - Get the PageTutor book & CD |
|
 |
|
|
Lifetime Web Hosting